<template>
  <el-aside
      :width="aside_data.aside_width + 'px'"
      :style="{ backgroundColor: aside_data.aside_background_color }"
  >
    <div
        :style="{
        height: aside_data.aside_title_height + 'px',
        color: aside_data.aside_title_text_color,
        backgroundColor: aside_data.aside_title_back_color,
      }"
        align="center"
    >
      <p style="padding-top: 20px">
        {{title}}
      </p>
    </div>
    <el-menu
        class="el-menu-vertical-demo"
        id="aside"
        @select="change_aside_menu"
        :default-active="activie_index"
        :default-openeds="0"
        :unique-opened="true"
        :background-color="aside_data.aside_background_color"
        :text-color="aside_data.aside_text_color"
        :active-text-color="aside_data.aside_active_text_color"
        :collapse="menu_state"
    >
      <el-menu-item v-for="(menu1, i) in menu_main"
                    :key="i"
                    :index="menu1.path"
                    >
        <i :class="menu1.icon" :style="{ color: aside_data.aside_text_color}"></i>
        <span slot="title">{{ menu1.name }}</span>
      </el-menu-item>
      <el-submenu
          v-for="(menu, index) in menu_data"
          :key="index"
          :index="index"
          v-show="menu.name_show"
      >
        <template slot="title">
          <i
              :class="menu.icon"
              :style="{ color: aside_data.aside_text_color, marginRight: '10px' }"
          ></i>
          <span>{{ menu.name }}</span>

        </template>
        <el-menu-item
            v-for="(menu_item, i) in menu_data[index].menu_item"
            :key="i"
            :index="menu_item.path"
            v-show="menu_item.label_show"
        >
          <i
              :class="menu_item.label_icon"
              v-show="menu_item.path == activie_index"
          />
          <i
              :class="menu_item.label_icon"
              :style="{ color: aside_data.aside_text_color }"
              v-show="menu_item.path != activie_index"
          /><span style="margin-left: 10px">{{
            menu_item.label
          }}</span></el-menu-item
        >
      </el-submenu>
      <el-menu-item @click="logoout">
        <i class="el-icon-switch-button" :style="{ color: aside_data.aside_text_color}"></i>
        <span slot="title">安全退出</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  props: ["menu_state"],
  data() {
    return {
      menu_data: JSON.parse(
          sessionStorage.getItem(sessionStorage.getItem("user_label")+"Menu")
      ),
      menu_main: JSON.parse(
          sessionStorage.getItem(sessionStorage.getItem("user_label")+"Main")
      ),
      activie_index: "/home",
      aside_data: JSON.parse(sessionStorage.getItem("menu_color")),
      title:"",
    };
  },
  methods: {
    change_aside_menu(index) {
      this.activie_index = index;
      this.$router.push(this.activie_index);
    },
    logoout(){
      this.$router.push("/");
      this.$message.success("已退出");
    }
  },
  watch: {
    menu_state() {
      const menu_data = JSON.parse(sessionStorage.getItem("menu_color"));
      if (this.menu_state) {
        this.aside_data.aside_width = menu_data.aside_small_width;
      } else {
        this.aside_data.aside_width = menu_data.aside_width;
        this.aside_data.aside_title = menu_data.aside_title;
      }
    },
  },
  mounted() {
    if(sessionStorage.getItem("user_label") == "student"){
      this.title = "学生";
    }else if(sessionStorage.getItem("user_label") == "head"){
      this.title = "班主任"
    }else if(sessionStorage.getItem("user_label") == "enter"){
      this.title = "企业"
    }else{
      this.title = "管理员"
    }
  }
};
</script>
<style scoped>
.el-menu {
  /* 去除右侧边框线 */
  border-right: 0 !important;
}
#aside::-webkit-scrollbar {
  display: none;
}
#aside {
  height: 90vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>